<template>
  <div class="video h-100 position-relative overflow-y">
    <div class="row m-0 h-lg-100">
      <div class="col-12 col-lg p-0 d-flex align-items-center min-video-h">
        <div class="w-100 video-window bg-black-1">
          <div class="position-absolute top bottom left right">
            <!--这里放视频窗口-->
            <div class="input_video">
              <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
              ></video-player>
            </div>
          </div>
        </div>
        <!--这里放LOGO-->
        <div class="position-absolute left top text-white pt-3 px-2 d-none d-lg-block">
          <div class="row h-100 m-0 text-left">
            <div class="col-auto h-100">
              <router-link to="/studentSide">
                <img class="h-100" src="../common/img/logosm.svg" alt />
              </router-link>
            </div>
            <div class="col px-0 pt-1">
              <h6 class="mb-0 small font-weight-bold">语文-第二单元第5章</h6>
              <p class="opacity-50 small">班级：小苹果班</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 p-0 inte min-inte-h">
        <div class="h-100 bg-inte">
          <div class="header bg-dark-2 px-3 py-2 text-secondary d-lg-none">
            <div class="row">
              <div class="col-auto pt-1 pr-0">
                <el-avatar :size="30" :src="circleUrl"></el-avatar>
              </div>
              <div class="col">
                <h6 class="mb-0">课程名称</h6>
                <p class="mb-0 small">老师</p>
              </div>
              <div class="col-auto pt-2">
                <span class="din_alternatebold text-din-data">434783</span>
              </div>
            </div>
          </div>
          <div class="header bg-dark-2 px-3 py-3 text-secondary d-none d-lg-block">
            <span>聊天中…</span>
          </div>
          <div
            class="position-absolute left right p-3 text-white overflow-y"
            style="top: 0px; bottom: 0px"
          >
            <Chatroom></Chatroom>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Chatroom from "components/chatroom"; // 聊天室
export default {
  name: "Video",
  components: {
    Chatroom // 聊天室
  },
  data() {
    return {
      input3: "",
      circleUrl:
        "https://gejubusinessbucket.oss-cn-beijing.aliyuncs.com/gejubusinessbucket/2019-12-10/8e53cfa40bf0e235b5e874f1e5f68ed5.png",
      // 视频播放
      playsinline: true,
      playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        live: true,
        autoplay: true, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        controls: true,
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        poster:
          "https://homeweb.oss-cn-beijing.aliyuncs.com/assets/lingshi/poster.jpg", //你的封面地址
        // poster: "http://gejuimage.oss-cn-beijing.aliyuncs.com/webimage/add/90324752.png",
        sources: [
          {
            type: "application/x-mpegURL",
            src:
              "http://media.cdn.geju.com/outfile/2020-04-16/6142a1516d82909339ee6eab1881c5da/人民学习宣传片1219高清版的副本.m3u8" //点播
            // src: "http://live.geju.com/live/rtmp_push.m3u8" //天创新盒子视频流地址
          }
        ],
        hls: true, //启用hls？
        fluid: true, //设置播放器为流体  宽度为外层盒子大小  ps：想设置width：100%找不到方法？这个就对了
        width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。

        controlBar: {
          timeDivider: true,
          remainingTimeDisplay: false,
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          progressControl: true, // 进度条
          durationDisplay: true,
          fullscreenToggle: true // 全屏按钮
        }
      }
    };
  },
  mounted() {
    console.log("this is current player instance object", this.player);
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      console.log("the player is readied", player);
      // you can use it to do something...
      // player.[methods]
    }
  }
};
</script>

<style>
.video {
  background-color: #09121d;
}
.video-window {
  overflow: hidden;
  position: relative;
}
.bg-black-1 {
  background: #000;
}
.bg-inte {
  background-color: #142738;
}
.bg-dark-2 {
  background-color: #0f1a28;
}
.video-js .vjs-big-play-button {
  /*
播放按钮换成圆形
*/
  height: 2em;
  width: 2em;
  line-height: 2em;
  border-radius: 1em;
}

.hutab {
  top: 40px;
  bottom: 50px;
}
.vjs-custom-skin > .video-js .vjs-big-play-button {
  left: 51.5%;
}
@media (max-width: 575.98px) {
  .hutab {
    top: 0;
    bottom: 50px;
  }
  .vjs-custom-skin > .video-js .vjs-big-play-button {
    left: 54%;
  }
}
@media (min-width: 992px) {
  .video-window {
    /* height: 30vw; */
    padding-bottom: 56.3%;
  }
  .inte {
    max-width: 320px;
    min-width: 260px;
  }
  .h-lg-100 {
    height: 100%;
  }
}
@media (max-width: 991px) {
  .video-window {
    height: 56.4vw;
  }
  .min-inte-h {
    position: absolute;
    top: 56.4vw;
    bottom: 0;
  }
}
</style>